<template>
  <dt-modal-edit ref='edit' :title='title' :loading="loading" :label-width='100' okText='确认'
    :width='400' @ok='onOk' :showOk='!check' :cancelText="check?'关闭':'取消'">
    <!-- <dt-grid ref="table" :onFetch='onFetch' :select="select" :height='300' /> -->
    <Table :columns="columns" :data="data" border height="400"
      @on-selection-change='tableChoose'>
    </Table>
  </dt-modal-edit>
</template>

<script>
  import columnOpt from './relevancyColumns'
  import planChannelApi from '@/biz/synthetic/planChannel'

  export default {
    data() {
      return {
        chooseList: [],
        data: [],
        columns: [
        {
          type: 'selection',
          key: 'choose',
          width: 60,
          align: 'center',
        },
        {
          title: '渠道名称',
          key: 'channelName',
          minWidth: 120,
        }],
        title: '关联渠道',
        loading: false,
        check: false,
        // selected: [],
        // // select: {
        // //   change: (e) => { this.tableChange(e) },
        // // },
        // select: {
        //   checkbox: {
        //     checkMethod: ({ row }) => {
        //       return row.isClueChannel != '1'
        //     }
        //   },
        //   change: (e) => { this.tableChange(e) },
        // },
        list: [],
        checkData: [],
        planId: ''
      }
    },
    methods: {
      show(data) {
        console.log(data, 'aaaaaaa');
        this.check = data.check
        this.checkData = data.tableData ? data.tableData : []
        this.planId = data.planId ? data.planId : ''

        this.$refs.edit.show()
        this.onFetch()
        // this.$refs.table.init(this, new columnOpt(this))
        // this.$refs.table.fetch()
      },
      onFetch() {
        if (this.check) {
          // return Promise.resolve(this.checkData)
          this.data = this.checkData
          this.columns = [
          {
            title: '渠道名称',
            key: 'channelName',
            minWidth: 120,
          }]
        } else {
          this.columns = [
          {
            type: 'selection',
            width: 60,
            align: 'center',
          },
          {
            title: '渠道名称',
            key: 'channelName',
            minWidth: 120,
          }]
          let params = {
            buildingId: this.$dt.buildInfo().housesId,
            planId: this.planId,
            type: '2'
          }
          return planChannelApi.planChannelList(params).then((res) => {
            if (res) {
              this.chooseList = []
              // let tmp = []
              // res.forEach(item => {
              //   if (item.isRelation == '1') {
              //     tmp.push(item)
              //   }
              // })
              // this.$refs.table.selectRows(tmp)
              this.data = res
              this.data.forEach(item => {
                if (item.isRelation == '1') {
                  item._checked = true
                  this.chooseList.push(item)
                }


                if (item.isClueChannel == '1') {
                  item._disabled = true
                }
              })
              // return res
            }
          })
        }
      },
      hide() {
        this.$refs.edit.hide()
      },
      onOk(data) {
        let params = {
          buildingId: this.$dt.buildInfo().housesId,
          channelDataList: this.chooseList,
          planId: this.planId
        }
        planChannelApi.updatePlanChannel(params).then((res) => {

          this.hide()
          this.$emit('success')
        })

      },
      tableChoose(val) {
        this.chooseList = val
        console.log(val, 'vvvvvvvaaaaaaaaaaaa');
      },
      // tableChange(data) {
      //   this.selected = data
      // }
    },
  }
</script>

<style lang="scss" scoped>
  .title {
    line-height: 20px;
    border-left: 3px solid #2b85e4;
    padding-left: 8px;
    margin-bottom: 10px;
  }
</style>